<template>
    <view class="" >
            <tabBar :currentPagePath="this.$route.meta.pagePath"></tabBar>
            <!-- 导航栏 -->
            <u-navbar title="送达">
                <view class="u-nav-slot" slot="left">
                </view>
            </u-navbar>
            <!-- 头部 -->
			<u-sticky>
				<view class="noticeHead">
				    <view style="width: 90%; margin-left: 5%; ">
				        <view style="color: #FFFFFF; font-size: 13pt;">期满日期查询</view>
				    </view>
				    <view class="noticeHead_search" @click="Show()">
						<view class="noticeHead_search_text" v-show="!data">请选择截止日期</view>
						<view class="noticeHead_search_data" v-show="data">{{data}}</view>
						<view>
							<u-icon name="calendar" size="28" class="icon" ></u-icon>
						</view>
				    </view>
				</view>
			</u-sticky>
			<u-calendar :show="show" :mode="mode" @confirm="confirm" @close='close' :maxDate="maxDate" :minDate="minDate"></u-calendar>
				
                
            
                    <view class="case">
						<scroll-view :scroll-top="scrollTop" scroll-y="true" class="case" @scrolltoupper="upper"
							@scrolltolower="lower" @scroll="scroll">
							
						
                    <view class="case_list" style="padding-bottom: 1rem;">
                        <view @click="toDetail(item)" v-for="(item, index) in arriveList" :key="index" class="case_content">
                            <view class="case_content_headview">
                             <view class="case_content_headview_head">{{ item.acceptcode }}</view>
                             <view class="case_content_headview_doneImg">
                                 <view >已受理</view>
                             </view>
                             </view>
                            <view >
                               <view class="case_content_info">
                                   <view class="case_content_info_column">
                                       <view class="case_content_info_column_title">业务名称：</view>
                                       <view class="case_content_info_column_content">行政复议</view>
                                   </view>
                                    <view class="case_content_info_column">
                                        <view class="case_content_info_column_title">环节：</view>
                                        <view class="case_content_info_column_content">受理</view>
                                    </view>
                                    <view class="case_content_info_column">
                                        <view class="case_content_info_column_title">申请人：</view>
                                        <view class="case_content_info_column_content">{{item.applyname}}</view>
                                    </view>
                                    <view class="case_content_info_column">
                                        <view class="case_content_info_column_title">被申请人：</view>
                                        <view class="case_content_info_column_content" >{{item.targetname}}</view>
                                    </view>
                                    <view class="case_content_info_column">
                                        <view class="case_content_info_column_title">来源：</view>
                                        <view class="case_content_info_column_content" >{{sourceConvert(item.source)}}</view>
                                    </view>
                                    <view class="case_content_info_column">
                                        <view class="case_content_info_column_title">申请日期：</view>
                                        <view class="case_content_info_column_content">{{item.prdate}}</view>
                                    </view>
                                    <view class="case_content_info_column">
                                        <view class="case_content_info_column_title">期满日期：</view>
                                        <view class="case_content_info_column_content">{{formatTime(item.warntime)}}</view>
                                    </view>
                                </view>
                            </view>
                            
                            </view>
                    <!-- 下拉显示控件 -->
                    <view v-if="arriveList.length != 0">
                        <u-loadmore :status="status" :load-text="loadText" />
                    </view>
                </view>
				</scroll-view>
            </view>
            
            <!-- 空状态 -->
            <u-empty v-if="arriveListEmpty" text="暂无工作记录" mode="data" style="margin-top: 10rem;">
            </u-empty>
            <!-- toast提示框 -->
            <u-toast ref="uToast" />
        </view>
    
</template>
 
<script>
    import {
        queryArriveData, // 查询文书送达列表
    } from "@/common/api/approve/notice/notice.js"
    import moment from "../../../node_modules/moment/moment.js"
    
    const d = new Date()
    const year = d.getFullYear()
    let month = d.getMonth() + 1
    month = month < 10 ? `0${month}` : month
    const date = d.getDate()
    
    export default {
        data() {
            return {
                maxDate: `${year}-${month}-${date + 50}`,
                minDate: `${year}-${month}-${date-30}`,
                data: '',
                show: false,
                mode: 'single',
                warntime: 0,
                arriveList: [],
                setList: [],
                pageinfo: { // 获取文书送达分页列表列表所传参数
                    f_applystarttime: "",
                    f_applyendtime: "",
                    // pageSize: 10,
                    pageNumber: 1,
                    pageSize: 20,
                    sort: "",
                    order: ""
                },
                status: 'loadmore', // 下拉状态
                loadText: { // 下拉文字
                    loadmore: '上拉加载更多',
                    loading: '努力加载中',
                    nomore: '没有更多了'
                },
                arriveListEmpty: false, // 文书列表空状态
                pageflag: false
            };
        },
		async onLoad() {
		    uni.showLoading({
		        title: "加载中"
		    })
			
		    await this.getArriveList(this.pageinfo)
			
		    uni.hideLoading()
		},
        computed: {
            startDate() {
                return this.getDate('start');
            },
            endDate() {
                return this.getDate('end');
            }
        },
        //上拉加载更多数据
        onReachBottom() {
            
        },
        onPullDownRefresh() {
            console.log("出发")
            uni.showLoading({
                title: "加载中"
            })
            
            this.pageinfo.pageNumber = 1
            this.arriveList = []
            this.getArriveList(this.pageinfo)
            setTimeout(() => {
                uni.stopPullDownRefresh()
				// uni.hideLoading()
            }, 1000)
			uni.hideLoading()
        },
        methods: {
			upper: function(e) {
					console.log(e)
				},
				lower: function(e) {
					if (this.status == "nomore") {
					    return
					}
					this.status = "loading"
					this.pageinfo.pageNumber++
					this.getArriveList(this.pageinfo)
				},
				scroll: function(e) {
					// console.log(e)
					this.old.scrollTop = e.detail.scrollTop
				},
				goTop: function(e) {
					// 解决view层不同步的问题
					this.scrollTop = this.old.scrollTop
					this.$nextTick(function() {
						this.scrollTop = 0
					});
					uni.showToast({
						icon: "none",
						title: "纵向滚动 scrollTop 值已被修改为 0"
					})
				},
			//判断案件来源
            sourceConvert(e) {
                if(e == 6002800) return '案件登记';
                else if (e==6002801) return '网上申请'
                else if(e==6002802) return '一窗信息'
            },
			//跳转到送达详情页
            toDetail(item) {
                uni.navigateTo({
                    url:'/pages/approve/notice/deliver?item=' + JSON.stringify(item),
                });
            },
			//获取文书送达列表数据
            async getArriveList(pageinfo){
                console.log("分页信息",pageinfo)
                await queryArriveData(pageinfo).then(res => {
                    
                    console.log("返回结果",res)
                    if (res.code == 0) {
                        if (res.data.records && res.data.records.length > 0) {
                            this.arriveListEmpty = false
                            this.arriveList = this.arriveList.concat(res.data.records)
                            this.pageflag = true
                            if (this.arriveList.length == res.data.total) {
                                this.status = "nomore"
                            } else {
                                this.status = "loadmore"
                            }
                        } else {
                            this.arriveListEmpty = true
                            this.arriveList = []
                        }
                    } else {
						this.$refs.uToast.show({
						    position: 'center',
						    message: '获取文书送达列表失败',
						    type: 'error'
						})
                    }
                    uni.hideLoading()
                })
                // uni.hideLoading()
            },
			//计算天数差
            daysBetweenDates(starDate){
                if(starDate){
                    // 返回天数差
                    return moment(starDate).diff(moment(new Date()), 'days')
                }else{
                    return undefined
                }
                
            },
			//时间格式转换
            formatTime(time){
                return time!=null ? moment(time).format('YYYY-MM-DD') + " 截止" : "无截止日期"
            },
			// 日历选择框打开
            Show(){
                this.show=true;
            },
			//日期选择成功
            confirm(e) {
                this.data=e[0]
                this.show=false
                let page=this.pageinfo
                page.f_applyendtime=e[0]
                this.getArriveList(page)
                
            },
			//关闭日历选择器
            close(){
                this.show=false
            }
            
        },
        
    }
</script>
 
<style lang="scss" scoped>
    @import '@/static/css/flex.scss';

    .noticeHead{
        width: 100%;
        height: 10rem;
        background-image: url(@/static/images/home/noticeHead.png);
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
		&_search{
			height: 2.5rem; 
			width: 90%;
			margin-left: 5%; 
			border-radius: 5pt; 
			background-color: #FFFFFF;
			display: flex;
			flex-direction: row;
			// position: absolute;
			top: 11.5rem;
			&_text{
				padding: 0.5rem; 
				color: rgba(31, 31, 31, 1); 
				opacity: 0.65;
				height: 2rem;
			}
			&_data{
				margin: 20rpx; 
				color: rgba(31, 31, 31, 1); 
				opacity: 1;
			}
		}
    }
	.icon{
		position: absolute; 
		right: 5%; 
		padding: 10rpx;
	}
    .case {
        // overflow: auto;
		height: 35.3rem;
		
        width: calc(100% - 1rem);
        margin: auto;
		
		
        &_button {
            width: 4rem;
            height: 4rem;
            position: fixed;
            top: 70%;
            left: 80%;
            background: #264AA2;
            box-shadow: 3px 4px 9px 0px rgba(38, 74, 162, 0.55);
            border-radius: 50%;
    
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 100;
    
            &_label {
                height: 0.8rem;
                font-size: 0.8rem;
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 0.8rem;
            }
        }
    
        &_list {
            box-sizing: border-box;
            margin: 30rpx 0 160rpx 0;
        }
    
        &_content:last-child {
            margin-bottom: 0;
        }
    
        &_content {
            box-sizing: border-box;
            width: 100%;
            background: #FFFFFF;
            box-shadow: 3px 4px 21px 0px #F5F5F5;
            border-radius: 10px;
            padding: 30rpx;
            position: relative;
            margin-bottom: 30rpx;
    
            &_headview {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-direction: row;
    
                &_head {
                    font-size: 1rem;
                    font-weight: 550;
                    color: #000000;
                }
    
                &_toDoImg {
                    background: linear-gradient(90deg, #FFD97A 0%, #FF9F00 54%, #D97E00 100%);
                    border-radius: 0rpx 20rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 0.8rem;
                    font-weight: bold;
                    color: #FFFFFF;
                    position: absolute;
                    right: 0;
                    top: 0;
                    padding: 10rpx 30rpx;
                }
    
                &_doneImg {
                    background: linear-gradient(90deg, #6ADE93 0%, #00B853 54%, #009146 100%);
                    border-radius: 0px 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 0.8rem;
                    font-weight: bold;
                    color: #FFFFFF;
                    position: absolute;
                    right: 0;
                    top: 0;
                    padding: 10rpx 30rpx;
                }
            }
    
    
            &_info {
                background: #fafafa;
                border-radius: 10px;
                margin-top: 30rpx;
                padding: 20rpx;
    
                &_column {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    flex-direction: row;
                    padding: 0px 15px;
    
                    &_title {
                        width: 5rem;
                        height: 1.6rem;
                        font-size: 0.8rem;
                        font-weight: 500;
                        color: #000000;
                        opacity: 0.65;
                        text-align: justify;
                        text-align-last: justify;
                    }
    
                    &_content {
                        width: 14rem;
                        height: 1.6rem;
                        font-size: 0.8rem;
                        font-weight: 550;
                        color: #1F1F1F;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    
        &_loadmore {}
    
        &_empty {
            margin-top: 10rem;
        }
    }
</style>
